<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>商品订单管理</span>
      </div>
    </template>
    <!-- 订单列表 -->
    <el-table :data="allOrders" style="width: 100%">
      <el-table-column label="商品图像">
        <template #default="{ row }">
          <img :src=row.businessImage style="width: 100px; object-fit: cover;">
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        width="400"
        prop="goodsName"
      ></el-table-column>
      <el-table-column label="购买者" prop="customerName"></el-table-column>
      <el-table-column label="购买时间" prop="buyTime"> </el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Search" circle plain type="primary" @click="searchDetails(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
    </el-card>
    <el-dialog v-model="stepsVisible" align-center>
        <el-steps style="width:100%" :active="active" finish-status="success">
            <el-step :title="active>0 ? '用户已下单' : '用户还未下单'"/>
            <el-step :title="active>1 ? '用户已经确认收货信息' : '用户还未确认收货信息'"/>
            <el-step :title="active>2 ? '商品已发货' : '商品还未发货'"/>
            <el-step :title="active>3 ? '商品已经到达' : (active==3 ? '商品正在派送' : '商品还未开始派送')"/>
            <el-step :title="active>4 ? '用户已经确认收货' : '用户还未确认收货'"/>
        </el-steps>
        <el-descriptions
            class="margin-top"
            :column="3"
            :size="size"
            border
        >
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle">
                        <user />
                    </el-icon>
                    购买者
                    </div>
                </template>
                {{ detailOrder.customerName }}
                </el-descriptions-item>
                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle">
                        <iphone />
                    </el-icon>
                    购买者电话号码
                    </div>
                </template>
                {{ detailOrder.telephone }}
                </el-descriptions-item>
                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle">
                        <location />
                    </el-icon>
                    购买者email
                    </div>
                </template>
                {{ detailOrder.email }}
                </el-descriptions-item>
                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle">
                        <tickets />
                    </el-icon>
                    购买的商品
                    </div>
                </template>
                {{ detailOrder.goodsName }}
                </el-descriptions-item>
                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle">
                        <office-building />
                    </el-icon>
                    购买总数
                    </div>
                </template>
                {{ detailOrder.goodsNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                    <el-icon :style="iconStyle">
                        <office-building />
                    </el-icon>
                    购买单价
                    </div>
                </template>
                {{ detailOrder.price }}
                </el-descriptions-item>
        </el-descriptions>
        <template class="next-step">
            <el-button style="margin-top: 12px display: flex;justify-content: center;" v-if="buttonVisible" v-model="buttonVisible" @click="next">{{ buttonName }}</el-button>
            <el-button style="margin-top: 12px display: flex;justify-content: center;" @click="stepsVisible = false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref } from 'vue';
import { getAllOrdersBusinessService, updateOrderService } from "@/api/order"
import { ElMessage } from "element-plus";

const allOrders = ref([]);

const detailOrder = ref({});

const stepsVisible = ref(false);

const active = ref(0);

const buttonName = ref("");

const buttonVisible = ref(false)

//分页条数据模型
const pageNum = ref(1); //当前页
const total = ref(20); //总条数
const pageSize = ref(3); //每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  getAllOrders();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  getAllOrders();
};

const determineActive = () => {
    if(!detailOrder.value.emailTime) {
        active.value = 1;
        buttonVisible.value = false;
    }else if(!detailOrder.value.shippingTime) {
        active.value = 2;
        buttonVisible.value = true;
        buttonName.value = "商品已经发货，更新订单状态";
    }else if(!detailOrder.value.deliveryTime) {
        active.value = 3;
        buttonVisible.value = true;
        buttonName.value = "商品已经配送完毕，更新订单状态";
    }else if(!detailOrder.value.arriveTime) {
        active.value = 4;
        buttonVisible.value = false;
    }else {
        active.value = 5;
    }
}

const next = async() => {
    const now = new Date();
    const options = {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false, // 24小时制
      timeZone: 'Asia/Shanghai' // 设置时区为上海，即中国标准时间
    };
    const localTime = now.toLocaleString('sv-SE', options).replace(',', '');
    console.log(active.value === 2 ? localTime : null);
    const data = {
        "businessName": detailOrder.value.businessName,
        "goodsName": detailOrder.value.goodsName,
        "buyTime": detailOrder.value.buyTime,
        "customerName": detailOrder.value.customerName,
        "shippingTime": active.value === 2 ? localTime : null,
        "deliveryTime": active.value === 3 ? localTime : null,
        "status": active.value === 2 ? "商品正在配送中" : "商品已到达",
    }
    await updateOrderService(data);
    ElMessage({type: "success", message: "修改完成"});
    stepsVisible.value = false;
    getAllOrders();
}

const getAllOrders = async() => {
    const params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    };
    const result = await getAllOrdersBusinessService(params);
    total.value = result.data.total;
    allOrders.value = result.data.items;
}

getAllOrders();

const searchDetails = async(row) => {
    detailOrder.value = row;
    determineActive();
    stepsVisible.value = true;
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.next-step {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}
</style>